<template>
  <div class="mapcss">
    <baidu-map v-if="center" class="bm-view" ak="3LgMlTyAIzk2ok2Sn5ZY6NPPmVQjMFch"  :center="center" :zoom="zoom" @ready="handler">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
       <bm-circle v-if="radius && center.lat" :center="center" :radius="radius * 1000" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"   :editing="false"></bm-circle>
       <bm-marker v-if="center.lat" :position="center" ></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import {BmMapType, BmNavigation, BmCircle,BmScale,BmMarker} from 'vue-baidu-map'

  export default {
    // 挂载地图级组件
    components: {
        BaiduMap,
        BmMapType,
        BmNavigation,
        BmCircle,
        BmScale,
        BmMarker
     },
    //对外的公开的变量
    props: {
      item:Object
    },
    //内部的私有的变量
    data(){
      return {
        BMap: undefined,
        map: undefined,
        center: undefined,
        zoom: 10,
        radius: undefined
      }
    },
    methods: {
      //百度地图
       handler ({BMap, map}) {
         console.log('handler')
         this.BMap=BMap;
         this.map= map;
      }
    },
    //只会被调用一次
    created() {
       console.log('created')
       console.log(this.item)
       if(this.item){
         this.center={}
         this.center.lng = this.item.longitude
         this.center.lat = this.item.latitude
         this.radius = this.item.radius
         this.zoom =13
       }
    }
  }
</script>

<style scoped>
  .mapcss{
    padding: 10px;
  }

  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>
